<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('百度ECharts')"/>
</head>
<body class="gray-bg">
<div class="row  border-bottom white-bg dashboard-header">
    <div class="col-sm-12">
        <p>ECharts开源来自百度商业前端数据可视化团队，基于html5
            Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。 <a
                    href="http://echarts.baidu.com/doc/about.html" target="_blank">了解更多</a>
        </p>
        <p>ECharts官网：<a href="http://echarts.baidu.com/" target="_blank">http://echarts.baidu.com/</a>
        </p>

    </div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>提现统计</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-bar-chart"></div>
                </div>
            </div>
        </div>
    </div>


</div>
<input type="hidden" name="item" id="item" th:value="${item}"/>
<input type="hidden" name="max" id="max" th:value="${max}"/>
<input type="hidden" name="min" id="min" th:value="${min}"/>


<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js"/>
<script type="text/javascript">


    $(function () {
        var item =[[${item}]];
        var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
        var baroption = {
            title: {
                text: '成功订单数量'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['数量a', '数量b']
            },
            grid: {
                x: 30,
                x2: 40,
                y2: 24
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: ['0点','1点', '2点', '3点', '4点', '5点', '6点', '7点', '8点', '9点', '10点', '11点', '12点'
                    ,'13点', '14点', '15点', '16点', '17点', '18点', '19点', '20点', '21点', '22点', '23点'
                    ]
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '数量a',
                    type: 'bar',
                    data: item

                },
                {
                    name: '数量b',
                    type: 'bar',
                    data: item
                }
            ]
        };
        barChart.setOption(baroption);

        window.onresize = barChart.resize;

    });















</script>
</body>
</html>